
<template>
  <div class="chest-pain-chart">
    <div ref="chart" class="chart" />
    <i class="el-icon-zoom-in chart-icon" @click="clickIcon" />
    <el-dialog
      :visible.sync="dialogVisible"
      :title="getTitle"
      :before-close="close"
      width="70%"
      top="10px"
    >
      <div class="dialog-content">
        <div class="dialog-content-zuo" @click="clickZuo">
          <img src="../../images/dashboard/zuohua.png" alt="" />
        </div>
        <div class="dialog-content-header">
          <div class="header-tip">
            <div class="header-tip-title">
              <div class="header-tip-title-left title">
                指标考核病例需满足条件
              </div>
              <div class="header-tip-title-right">条件说明</div>
            </div>
            <div class="header-tip-content">
              <div class="header-tip-content-left">
                <div
                  class="header-tip-content-left-item"
                  v-for="(item, i) in conditionalValueList[chartIndex]
                    .conditionaList"
                  :key="i"
                >
                  {{ item }}
                </div>
              </div>
              <div class="header-tip-content-right">
                <div
                  class="header-tip-content-left-item"
                  v-for="(item, i) in conditionalValueList[chartIndex]
                    .valueList"
                  :key="i"
                >
                  {{ item }}
                </div>
              </div>
            </div>
          </div>
          <el-form :inline="true" class="demo-form-inline" label-width="80px">
            <el-form-item label="统计周期">
              <el-date-picker
                v-model="formInline.month"
                type="month"
                value-format="yyyy-M"
                clearable
                placeholder="选择月"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              ><el-button type="primary" @click="getSearchSigleChart()"
                >搜索</el-button
              ></el-form-item
            >
            <el-form-item
              ><el-button type="primary" @click="onPrint"
                >导出</el-button
              ></el-form-item
            >
          </el-form>
        </div>
        <div id="dialogContent">
          <div ref="dialogChart" class="dialog-content-chart" />
          <div class="title">指标详情</div>
          <el-table :data="detailslList" border @row-click="onRowClick">
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              align="center"
              v-for="item in detailsColumn"
              :key="item.prop"
            />
          </el-table>
          <template v-if="particularslList.length">
            <div class="title">统计明细</div>
            <el-table
              :data="particularslList"
              border
              @row-click="onRowDetailedClick"
            >
              <el-table-column
                type="index"
                width="50"
                label="序号"
                align="center"
              />
              <el-table-column
                :prop="item.prop"
                :label="item.label"
                align="center"
                v-for="item in particularsColumn"
                :key="item.prop"
              >
                <template slot-scope="scope">
                  <span
                    v-if="item.prop == 'diffMinute'"
                    :class="{ isRed: scope.row.isAbnormal == 1 }"
                    >{{ scope.row.diffMinute }}</span
                  >
                  <span
                    v-else-if="item.prop == 'isReach'"
                    :class="{ isRed: scope.row.isReach != 1 }"
                    >{{ scope.row.isReach == 1 ? "是" : "否" }}</span
                  >
                  <span v-else>{{ scope.row[item.prop] }}</span>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
        <div class="dialog-content-you" @click="clickYou">
          <img src="../../images/dashboard/youhua.png" alt="" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import echarts from "echarts";
import { htmlToPDF } from "@/utils/htmlToPdf.js";
import {
  getCpcQuotaOverall, //认证
  getCpcQcOverall, //质控
  getCpcQuotaPatientList, //认证
  getCpcQcPatientList, //质控
} from "@/api/follow-up/chest-pain";
import {
  getCpcQcQuota, //质控
  getCpcQuota, //认证
} from "@/api/statistical/statistical-analysis";
export default {
  name: "QualityChart",
  props: {
    chartData: {
      type: Object,
      default: null,
    },
    singleChartData: {
      type: Object,
      default: null,
    },
    index: {
      type: Number,
      default: 0,
    },
    diseaseType: {
      type: String,
      default: "",
    },
    conditionalValueList: {
      type: Array,
      default: [],
    },
    selectTarget: {
      type: String,
      default: "zkzb",
    },
  },
  computed: {
    getTitle() {
      return this.chartIndex + 1 + "、" + this.singleChartData.name;
    },
  },
  data() {
    return {
      dialogVisible: false,
      isShowReachRatio: "",
      searchOptionData: {
        successRate: [],
        timeData: [],
        averageData: [],
        unit: "",
      },
      chartIndex: 0,
      sigleChart: null,
      formInline: {},
      detailslList: [],
      particularslList: [],
      unit: "",
      // 时间表头
      timeDetailsColumn: [
        {
          prop: "timeName",
          label: "月份",
        },
        {
          prop: "avgQuotaMinute",
          label: "平均值",
        },
        {
          prop: "maxQuotaMinute",
          label: "最大值",
        },
        {
          prop: "minQuotaMinute",
          label: "最小值",
        },
        {
          prop: "countQuota",
          label: "纳入统计数量",
        },
      ],
      timeParticularsColumn: [
        {
          prop: "name",
          label: "患者姓名",
        },
        {
          prop: "quotaTime1",
          label: "首次医疗接触时间",
        },
        {
          prop: "quotaTime2",
          label: "首份心电图时间",
        },
        {
          prop: "diffMinute",
          label: "时间差",
        },
      ],
      // 比例表头
      scaleDetailsColumn: [
        {
          prop: "timeName",
          label: "月份",
        },
        {
          prop: "value",
          label: "百分比",
        },
        {
          prop: "countReach",
          label: "达标数量",
        },
        {
          prop: "countNotReach",
          label: "未达标数量",
        },
        {
          prop: "countQuota",
          label: "纳入统计数量",
        },
      ],
      scaleParticularsColumn: [
        {
          prop: "name",
          label: "患者姓名",
        },
        {
          prop: "patientId",
          label: "患者ID",
        },
        {
          prop: "isReach",
          label: "是否达标",
        },
      ],
      detailsColumn: [
        {
          prop: "timeName",
          label: "月份",
        },
        {
          prop: "avgQuotaMinute",
          label: "平均值",
        },
        {
          prop: "maxQuotaMinute",
          label: "最大值",
        },
        {
          prop: "minQuotaMinute",
          label: "最小值",
        },
        {
          prop: "countQuota",
          label: "纳入统计数量",
        },
      ],
      particularsColumn: [
        {
          prop: "name",
          label: "患者姓名",
        },
        {
          prop: "quotaTime1",
          label: "首次医疗接触时间",
        },
        {
          prop: "quotaTime2",
          label: "首份心电图时间",
        },
        {
          prop: "diffMinute",
          label: "时间差",
        },
      ],
    };
  },
  mounted() {
    this.getChart();
    console.log(this.chartData);
  },
  methods: {
    getChart() {
      const chartLine = this.$refs.chart;
      let _this = this;
      const option2 = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          itemWidth: 18,
          itemHeight: 10,
          itemGap: 50,
          bottom: 0,
          data: [{ name: "指标值", icon: "rect" }],
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#F3F3F9",
              },
            },
            axisLabel: {
              color: "#666666",
            },
            data: this.chartData.timeData,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: this.chartData.unit,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: ["#F3F3F9"],
              },
            },
            axisLabel: {
              formatter: "{value}%",
            },
          },
        ],
        series: [
          {
            name: "指标值",
            type: "bar",
            barWidth: 20,
            itemStyle: {
              color: "#4380EA",
            },
            data: this.chartData.averageData,
          },
        ],
      };
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          itemWidth: 18,
          itemHeight: 10,
          itemGap: 50,
          bottom: 0,
          data:
            this.chartData.isShowReachRatio === "0"
              ? [{ name: "指标值", icon: "rect" }]
              : [
                  { name: "指标值", icon: "rect" },
                  { name: "达标率", icon: "emptyCircle" },
                ],
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#F3F3F9",
              },
            },
            axisLabel: {
              color: "#666666",
            },
            data: this.chartData.timeData,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis:
          this.chartData.isShowReachRatio === "0"
            ? [
                {
                  type: "value",
                  name: this.chartData.unit,
                  axisLine: {
                    show: false,
                  },
                  splitLine: {
                    lineStyle: {
                      color: ["#F3F3F9"],
                    },
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLabel: {
                    formatter: "{value}",
                  },
                },
              ]
            : [
                {
                  type: "value",
                  name: this.chartData.unit,
                  axisLine: {
                    show: false,
                  },
                  splitLine: {
                    lineStyle: {
                      color: ["#F3F3F9"],
                    },
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLabel: {
                    formatter: "{value}",
                  },
                },
                {
                  type: "value",
                  name: "（达标率）",
                  axisLine: {
                    show: false,
                  },
                  axisTick: {
                    show: false,
                  },
                  splitLine: {
                    lineStyle: {
                      color: ["#F3F3F9"],
                    },
                  },
                  axisLabel: {
                    formatter: "{value} %",
                  },
                },
              ],
        series:
          this.chartData.isShowReachRatio === "0"
            ? [
                {
                  name: "指标值",
                  barWidth: 20,
                  type: "bar",
                  data: this.chartData.averageData,
                  itemStyle: {
                    normal: {
                      color: (val) => {
                        const successData =
                          this.chartData.successRate[val.dataIndex];
                        if (
                          successData === null ||
                          (successData && successData > 0)
                        ) {
                          return "#4380ea";
                        } else {
                          return "#c23531";
                        }
                      },
                    },
                  },
                },
              ]
            : [
                {
                  name: "指标值",
                  barWidth: 20,
                  type: "bar",
                  data: this.chartData.averageData,
                  itemStyle: {
                    normal: {
                      color: (val) => {
                        const successData =
                          this.chartData.successRate[val.dataIndex];
                        if (
                          successData === null ||
                          (successData && successData > 0)
                        ) {
                          return "#4380ea";
                        } else {
                          return "#c23531";
                        }
                      },
                    },
                  },
                },
                {
                  name: "达标率",
                  type: "line",
                  itemStyle: {
                    color: "#F6A044",
                  },
                  yAxisIndex: 1,
                  data: this.chartData.successRate,
                },
              ],
      };
      if (chartLine) {
        const myChart = echarts.init(chartLine);
        console.log(this.index,this.diseaseType);
        if (this.diseaseType == "trauma") {
          if (this.index == 2) {
            myChart.setOption(option2);
          } else {
            myChart.setOption(option);
          }
        } else {
          if (
            this.index == 11 ||
            this.index == 15 ||
            (this.index == 22 && this.selectTarget !== "zkzb") ||
            (this.index == 21 && this.selectTarget !== "zkzb")
          ) {
            myChart.setOption(option2);
          } else {
            myChart.setOption(option);
          }
        }
      }
    },
    getSigleChart() {

      const chartLine = this.$refs.dialogChart;
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          itemWidth: 18,
          itemHeight: 10,
          itemGap: 50,
          bottom: 0,
          data:
            this.isShowReachRatio === "0"
              ? [
                  {
                    name: this.unitValue == "%" ? "百分比" : "平均值",
                    icon: "rect",
                  },
                ]
              : [
                  {
                    name: this.unitValue == "%" ? "百分比" : "平均值",
                    icon: "rect",
                  },
                  {
                    name: "达标率",
                    icon: "emptyCircle",
                  },
                ],
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#F3F3F9",
              },
            },
            axisLabel: {
              color: "#666666",
            },
            data: this.singleChartData.optionData.timeData,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis:
          this.isShowReachRatio === "0"
            ? [
                {
                  type: "value",
                  name: this.unit,
                  axisLine: {
                    show: false,
                  },
                  splitLine: {
                    lineStyle: {
                      color: ["#F3F3F9"],
                    },
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLabel: {
                    formatter: "{value}",
                  },
                },
              ]
            : [
                {
                  type: "value",
                  name: this.unit,
                  axisLine: {
                    show: false,
                  },
                  splitLine: {
                    lineStyle: {
                      color: ["#F3F3F9"],
                    },
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLabel: {
                    formatter: "{value}",
                  },
                },
                {
                  type: "value",
                  name: "（达标率）",
                  axisLine: {
                    show: false,
                  },
                  axisTick: {
                    show: false,
                  },
                  splitLine: {
                    lineStyle: {
                      color: ["#F3F3F9"],
                    },
                  },
                  axisLabel: {
                    formatter: "{value} %",
                  },
                },
              ],
        series:
          this.isShowReachRatio === "0"
            ? [
                {
                  name: this.unitValue == "%" ? "百分比" : "平均值",
                  type: "bar",
                  itemStyle: {
                    color: "#4380EA",
                  },
                  barWidth: 20,
                  data: this.singleChartData.optionData.averageData,
                  itemStyle: {
                    normal: {
                      color: (val) => {
                        const successData =
                          this.singleChartData.optionData.successRate[
                            val.dataIndex
                          ];
                        if (
                          successData === null ||
                          (successData && successData > 0)
                        ) {
                          return "#4380ea";
                        } else {
                          return "#c23531";
                        }
                      },
                    },
                  },
                },
              ]
            : [
                {
                  name: this.unitValue == "%" ? "百分比" : "平均值",
                  type: "bar",
                  itemStyle: {
                    color: "#4380EA",
                  },
                  barWidth: 20,
                  data: this.singleChartData.optionData.averageData,
                  itemStyle: {
                    normal: {
                      color: (val) => {
                        const successData =
                          this.singleChartData.optionData.successRate[
                            val.dataIndex
                          ];
                        if (
                          successData === null ||
                          (successData && successData > 0)
                        ) {
                          return "#4380ea";
                        } else {
                          return "#c23531";
                        }
                      },
                    },
                  },
                },
                {
                  name: "达标率",
                  type: "line",
                  itemStyle: {
                    color: "#F6A044",
                  },
                  yAxisIndex: 1,
                  data: this.singleChartData.optionData.successRate,
                },
              ],
      };
      if (chartLine) {
        this.sigleChart = echarts.init(chartLine);
        this.sigleChart.clear();
        this.sigleChart.setOption(option);
        this.sigleChart.on("click", (params) => {
          this.onRowClick({ timeName: params.name });
        });
      }
    },
    async getSearchSigleChart() {
      const year = this.formInline.month
        ? new Date(this.formInline.month).getFullYear()
        : "";
      const month = this.formInline.month
        ? new Date(this.formInline.month).getMonth() + 1
        : "";
      if (!this.formInline.month) {
        this.getCpcQuotaOverallData();
        return;
      }
      this.getCpcQuotaOverallData(true);
      if (this.selectTarget === "zkzb") {
        const result = await getCpcQcQuota({
          hospitalId: this.$store.getters.hospitalId,
          year,
          month,
          indexes: this.chartIndex + 1,
        });

        if (this.formInline.month) {
          result.data.forEach((el) => {
            let successRate = [];
            let timeData = [];
            let averageData = [];
            // 1:时间 2:比例 3:数量
            successRate = el.optionData.map((rate) => {
              return rate.ratioReach;
            });
            timeData = el.optionData.map((rate) => {
              return rate.timeName;
            });
            averageData = el.optionData.map((rate) => {
              return rate.value;
            });
            this.isShowReachRatio = el.isShowReachRatio;
            this.unit = el.unit === "%" ? "(百分比)" : "(" + el.unit + ")";
            this.unitValue = el.unit; //原始参数
            this.searchOptionData = {
              successRate: successRate,
              timeData: [this.formInline.month],
              averageData: averageData,
            };
          });
        }
      } else {
        const result = await getCpcQuota({
          hospitalId: this.$store.getters.hospitalId,
          year,
          month,
          indexes: this.chartIndex + 1,
        });
        if (this.formInline.month) {
          result.data.forEach((el) => {
            let successRate = [];
            let timeData = [];
            let averageData = [];
            successRate = el.optionData.map((rate) => {
              return rate.ratioReach;
            });
            timeData = el.optionData.map((rate) => {
              return rate.timeName;
            });
            averageData = el.optionData.map((rate) => {
              return rate.value;
            });
            this.isShowReachRatio = el.isShowReachRatio;
            this.unit = el.unit === "%" ? "(百分比)" : "(" + el.unit + ")";
            this.unitValue = el.unit; //原始参数
            this.searchOptionData = {
              successRate: successRate,
              timeData: [this.formInline.month],
              averageData: averageData,
            };
          });
        }
      }
      if (!this.formInline.month) {
        this.particularslList = [];
      } else {
        this.onRowClick(this.detailslList[0]);
      }
      const chartLine = this.$refs.dialogChart;
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          itemWidth: 18,
          itemHeight: 10,
          itemGap: 50,
          bottom: 0,
          data:
            this.isShowReachRatio === "0"
              ? [
                  {
                    name: this.unitValue == "%" ? "百分比" : "平均值",
                    icon: "rect",
                  },
                ]
              : [
                  {
                    name: "达标率",
                    icon: "emptyCircle",
                  },
                  {
                    name: this.unitValue == "%" ? "百分比" : "平均值",
                    icon: "rect",
                  },
                ],
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#F3F3F9",
              },
            },
            axisLabel: {
              color: "#666666",
            },
            data: this.searchOptionData.timeData,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis:
          this.isShowReachRatio === "0"
            ? [
                {
                  type: "value",
                  name: this.unit,
                  axisLine: {
                    show: false,
                  },
                  splitLine: {
                    lineStyle: {
                      color: ["#F3F3F9"],
                    },
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLabel: {
                    formatter: "{value}",
                  },
                },
              ]
            : [
                {
                  type: "value",
                  name: this.unit,
                  axisLine: {
                    show: false,
                  },
                  splitLine: {
                    lineStyle: {
                      color: ["#F3F3F9"],
                    },
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLabel: {
                    formatter: "{value}",
                  },
                },
                {
                  type: "value",
                  name: "（达标率）",
                  axisLine: {
                    show: false,
                  },
                  axisTick: {
                    show: false,
                  },
                  splitLine: {
                    lineStyle: {
                      color: ["#F3F3F9"],
                    },
                  },
                  axisLabel: {
                    formatter: "{value} %",
                  },
                },
              ],
        series:
          this.isShowReachRatio === "0"
            ? [
                {
                  name: this.unitValue == "%" ? "百分比" : "平均值",
                  type: "bar",
                  itemStyle: {
                    color: "#4380EA",
                  },
                  barWidth: 20,
                  data: this.searchOptionData.averageData,
                  itemStyle: {
                    normal: {
                      color: (val) => {
                        const successData =
                          this.searchOptionData.successRate[0];
                        if (
                          successData === null ||
                          (successData && successData > 0)
                        ) {
                          return "#4380ea";
                        } else {
                          return "#c23531";
                        }
                      },
                    },
                  },
                },
              ]
            : [
                {
                  name: this.unitValue == "%" ? "百分比" : "平均值",
                  type: "bar",
                  itemStyle: {
                    color: "#4380EA",
                  },
                  barWidth: 20,
                  data: this.searchOptionData.averageData,
                  itemStyle: {
                    normal: {
                      color: (val) => {
                        const successData =
                          this.searchOptionData.successRate[0];
                        if (
                          successData === null ||
                          (successData && successData > 0)
                        ) {
                          return "#4380ea";
                        } else {
                          return "#c23531";
                        }
                      },
                    },
                  },
                },
                {
                  name: "达标率",
                  type: "line",
                  itemStyle: {
                    color: "#F6A044",
                  },
                  yAxisIndex: 1,
                  data: this.searchOptionData.successRate,
                },
              ],
      };
      if (chartLine) {
        this.sigleChart = echarts.init(chartLine);
        this.sigleChart.clear();
        this.sigleChart.setOption(option);
        this.sigleChart.on("click", (params) => {
          this.onRowClick({ timeName: params.name });
        });
      }
    },
    clickIcon() {
      this.dialogVisible = true;
      this.chartIndex = this.index;
      this.$emit("clickIcon", this.chartIndex);
      this.$nextTick(() => {
        this.getCpcQuotaOverallData();
      });
    },
    clickZuo() {
      this.$emit("clickZuo", this.chartIndex);
      this.clean();
      this.$nextTick(() => {
        this.chartIndex = this.singleChartData.index;
        this.getCpcQuotaOverallData();
      });
    },
    clickYou() {
      this.clean();
      this.$emit("clickYou", this.chartIndex);
      this.$nextTick(() => {
        this.chartIndex = this.singleChartData.index;
        this.getCpcQuotaOverallData();
      });
    },
    async onRowClick(row) {
      if (this.selectTarget === "zkzb") {
        // 质控指标
        const result = await getCpcQcPatientList({
          index: this.chartIndex + 1,
          timeName: row.timeName,
        });
        if (result.data.type === "1") {
          this.particularslList = result.data.list.filter((ele) => {
            return ele.diffMinute;
          });
        } else if (result.data.type === "2") {
          this.particularslList = result.data.list.filter((ele) => {
            return ele.isReach;
          });
        } else {
          this.particularslList = result.data.list;
        }

        if (result.data.titleRatio) {
          this.particularsColumn[2].label = result.data.titleRatio;
        }
        if (result.data.titleTime1) {
          this.particularsColumn[1].label = result.data.titleTime1;
        }
        if (result.data.titleTime2) {
          this.particularsColumn[2].label = result.data.titleTime2;
        }
      } else {
        // 认证指标
        const result = await getCpcQuotaPatientList({
          index: this.chartIndex + 1,
          timeName: row.timeName,
        });
        this.particularslList = result.data.list;
        if (result.data.titleRatio) {
          this.particularsColumn[2].label = result.data.titleRatio;
        }
        if (result.data.titleTime1) {
          this.particularsColumn[1].label = result.data.titleTime1;
        }
        if (result.data.titleTime2) {
          this.particularsColumn[2].label = result.data.titleTime2;
        }
      }
    },
    // 跳转上报表单
    onRowDetailedClick(row) {
      row.abNormal = true;
      row.diseaseType = "胸痛";
      row.medicalId = 0;
      const rowStr = JSON.stringify(row);
      this.$router.push({
        name: "patientsList",
        params: {
          rowStr: rowStr,
        },
      });
    },
    // 关闭切换
    close() {
      this.clean();
      this.dialogVisible = false;
    },
    clean() {
      this.particularslList = [];
      this.formInline.month = "";
    },
    // 指标详情
    async getCpcQuotaOverallData(isSearch) {
      const year = this.formInline.month
        ? new Date(this.formInline.month).getFullYear()
        : "";
      const month = this.formInline.month
        ? new Date(this.formInline.month).getMonth() + 1
        : "";
      if (this.selectTarget === "zkzb") {
        const result = await getCpcQcOverall({
          index: this.chartIndex + 1,
          ...this.formInline,
          year,
          month,
        });
        if (result.data.type == 1) {
          this.detailsColumn = this.timeDetailsColumn;
          this.particularsColumn = this.timeParticularsColumn;
        } else {
          this.detailsColumn = this.scaleDetailsColumn;
          if (result.data.titleRatio1) {
            this.detailsColumn[2].label = result.data.titleRatio1;
          }
          if (result.data.titleRatio2) {
            this.detailsColumn[3].label = result.data.titleRatio2;
          }
          this.particularsColumn = this.scaleParticularsColumn;
        }
        this.detailslList = result.data.list;
        if (!isSearch) {
          this.unit =
            result.data.unit === "%"
              ? "(百分比)"
              : "(" + result.data.unit + ")";
          this.unitValue = result.data.unit; //原始参数
          this.isShowReachRatio = result.data.isShowReachRatio;
          this.particularslList = [];
          this.getSigleChart();
        }
      } else {
        const result = await getCpcQuotaOverall({
          index: this.chartIndex + 1,
          ...this.formInline,
          year,
          month,
        });
        if (result.data.type == 1) {
          this.detailsColumn = this.timeDetailsColumn;
          this.particularsColumn = this.timeParticularsColumn;
        } else {
          this.detailsColumn = this.scaleDetailsColumn;
          if (result.data.titleRatio1) {
            this.detailsColumn[2].label = result.data.titleRatio1;
          }
          if (result.data.titleRatio2) {
            this.detailsColumn[3].label = result.data.titleRatio2;
          }
          this.particularsColumn = this.scaleParticularsColumn;
        }
        this.detailslList = result.data.list;
        if (!isSearch) {
          this.unit =
            result.data.unit === "%"
              ? "(百分比)"
              : "(" + result.data.unit + ")";
          this.unitValue = result.data.unit; //原始参数
          this.isShowReachRatio = result.data.isShowReachRatio;
          this.particularslList = [];
          this.getSigleChart();
        }
      }
    },
    onPrint() {
      htmlToPDF("dialogContent", this.getTitle);
    },
  },
};
</script>

<style lang="less">
.chest-pain-chart {
  width: 100%;
  height: 100%;
  position: relative;
  .chart {
    width: 100%;
    height: 100%;
  }
  .chart-icon {
    z-index: 999;
    cursor: pointer;
    font-size: 20px;
    color: #54647d;
    position: absolute;
    bottom: 5px;
    right: 30px;
  }
  .el-dialog__body {
    // height: 600px;
  }
  .dialog-content {
    width: 100%;
    height: 100%;
    padding: 0 25px;
    &-zuo {
      cursor: pointer;
      z-index: 999;
      position: absolute;
      left: 40px;
      top: 300px;
    }
    &-you {
      cursor: pointer;
      z-index: 999;
      position: absolute;
      right: 40px;
      top: 300px;
    }
    // &-header {
    //   color: #333333;
    //   font-size: 24px;
    //   text-align: center;
    //   line-height: 24px;
    // }
    &-chart {
      width: 100%;
      // height: ~"calc(100% - 24px)";
      height: 400px;
    }
  }
}
</style>
<style lang="less" scoped>
.dialog-content-header {
  text-align: left !important;
  .header-tip {
    &-title {
      font-size: 14px;
      margin-left: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &-left {
        flex: 1;
      }
      &-right {
        flex: 1;
        color: #409eff;
        margin-left: 10px;
      }
    }
    &-content {
      display: flex;
      justify-content: space-between;
      margin: 10px;
      &-left {
        flex: 1;
        border-right: 2px solid #eee;
      }
      &-right {
        flex: 1;
        padding-left: 20px;
      }
    }
  }
}
.title {
  margin: 10px 0;
  font-weight: 700;
}
.isRed {
  color: red;
}
#dialogContent {
  padding: 20px;
}
</style>